<template>
    <div>
        <h1>没有设置命名空间</h1>
        <div class="wrap">
            <h2>state</h2>
            <p>x:{{ x }}</p>
        </div>

        <div class="wrap">
            <h2>getters</h2>
            <p>2x:{{ doubleX }}</p>
        </div>

        <div class="wrap">
            <h2>mutations</h2>
            <p>
                <button @click="addX">x++</button>
              
            </p>
           
        </div>


        <div class="wrap">
            <h2>actions</h2>
            <p>
                <button @click="addX_Async">x++</button>
            </p>
            
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
    computed: {
        ...mapState({
            x:function(state){
                return state.demo.x;
            }
        }),
        ...mapGetters(["doubleX"]),

        // 此写法只支持存在命名空间(namespaced:true)时 方可
        // ...mapState("demo", ["x"])
    },
    methods: {
        ...mapMutations(["addX"]),
        ...mapActions(["addX_Async"]),
    },
    mounted() {
        console.log("根store", this.$store);
    }
}
</script>

<style scoped>
.wrap {
    padding: 5px;
    border: 1px dashed #333;
    margin: 5px;
}
</style>